<%@ page pageEncoding="UTF-8"%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <script src="./js/jquery-3.7.1.js"></script>
</head>
<style>
    table{
        width: 60%;
    }
    tr{
        text-align: center;
    }
    table,td,th{
        border: 1px solid black;
    }
</style>
<body>
    品种：<select id="petBreedSelect" name="petBreed">
        <option value="">--全部--</option>
    </select>
    <button type="button" onclick="loadPetData()">查询</button>
    <button type="button" onclick="addPet()">新增宠物</button>
    <table id="petTable">
        <tr>
            <th>宠物昵称</th>
            <th>出生日期</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
<%--        <tr>--%>
<%--            <td>豆豆</td>--%>
<%--            <td>2020-10-09</td>--%>
<%--            <td>雄</td>--%>
<%--        </tr>--%>
<%--        <tr>--%>
<%--            <td>冰冰</td>--%>
<%--            <td>2021-10-09</td>--%>
<%--            <td>雌</td>--%>
<%--        </tr>--%>
    </table>
    <script>
        $(function () {
            loadPetData()
        })
        function loadPetData(){
            // 获取品种
            let petBreed = $('#petBreedSelect').val()
            $.ajax({
                url:"/petServlet?petBreed=" + petBreed,
                type:"get",
                dataType:"json",
                success:function (result) {
                    // console.log(result)
                    if(result.code == 200) {
                        // 清空宠物表格中的宠物数据（不包括表头）
                        $('#petTable tr:gt(0)').remove()
                        // $('#petTable tr:not(first)').remove()
                        //清空select下面的品种
                        $('#petBreedSelect option:gt(0)').remove()
                        for (let item of result.data.pets) {
                            let trEle = $("<tr><td>" + item.petName + "</td><td>" + item.birthdayFormatStr + "</td><td>" + item.petSexStr + "</td><td><a href='#' onclick='deletePet("+item.petId+",this)'>删除</a></td></tr>")
                            //往表格的末尾添加宠物
                            $('#petTable').append(trEle)
                        }
                        //把品种放到select下面
                        let breedList = result.data.breedList
                        for (let item of breedList) {
                            let optionEle = $("<option value='" + item.value + "'>" + item.name + "</option>")
                            $('#petBreedSelect').append(optionEle)
                        }
                    } else {
                        alert(result.msg)
                    }
                }
            })
        }
        //删除宠物
        function deletePet(petId,element){
            $.ajax({
                url:"/deletePet",
                data:{
                    petId:petId
                },
                type:"post",
                dataType:"json",
                success:function (result) {
                    if(result.code == 200) {
                        $(element).parent().parent().remove()
                    } else {
                        alert(result.msg)
                    }
                }
            })
        }
        // 新增宠物
        function addPet(){
            location.href = <%= request.getContextPath() %>'/addPetPageServlet'
        }
    </script>
</body>
</html>
